import React, { Component, Fragment, useState } from "react";
import { Layout } from 'antd';
import Head from '../../common/header';
import './index.css';
import { LockOutlined, UnlockOutlined, CloseSquareOutlined } from '@ant-design/icons';
import { connect, useSelector, useDispatch } from "react-redux";
import * as actionCreator from './store/actionCreator';
const { Content } = Layout;

const Home = () => {
    const [show1, setShow1] = useState(false);
    const [show2, setShow2] = useState(false);
    const [usedId, setUsedId] = useState(1);
    const [number, setNumber] = useState('');
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [time, setTime] = useState('');
    const dispatch = useDispatch();
    const roomList = useSelector((state) => {
        return state.app.roomList;
    })
    const liveIn = (id, number, name, phone, time) => {
        const action = actionCreator.liveIn(id, number, name, phone, time);
        dispatch(action);
    }
    const handleChangeRoom = (e) => {
        var room = e.target.value;
        setNumber(room);
    }
    const handleChangeName = (e) => {
        var name = e.target.value;
        setName(name);
    }
    const handleChangePhone = (e) => {
        var phone = e.target.value;
        setPhone(phone);
    }
    const handleChangeTime = (e) => {
        var time = e.target.value;
        setTime(time)
    }
    const handleOpen = (id) => {
        setUsedId(id);
        setShow1(true);
        setNumber(roomList[id - 1].number);
    }
    const handleLiveIn = (id, number, name, phone, time) => {
        liveIn(id, number, name, phone, time);
        handleClose();
        setName('');
        setPhone('');
        setTime('');
    }
    const handleClose = () => {
        setShow1(false);
        setName('');
        setPhone('');
        setTime('');
    }
    const handleShowInfo = (id) => {
        setUsedId(id);
        setShow2(true);
        setNumber(roomList[id - 1].number);
        setName(roomList[id - 1].name);
        setPhone(roomList[id - 1].phone);
        setTime(roomList[id - 1].time);
    }
    const handleClose2 = () => {
        setShow2(false);
        setName('');
        setPhone('');
        setTime('');
    }
    return (
        <Fragment>
            <Head />
            <Content style={{ padding: '10px 50px' }}>
                <div className="home-container">
                    {roomList.map((item) => {
                        return (
                            <div key={item.id} className="room-item">
                                {item.used ? <div><LockOutlined onClick={() => handleShowInfo(item.id)} className="room-icon" /></div>
                                    : <UnlockOutlined className="room-icon" onClick={() => handleOpen(item.id)} />}
                                <div className="room-name">{item.number}房间</div>
                                <div className="room-desc">
                                    <span>状态:{item.used ? '使用中  ' : '空闲  '}</span>
                                    <span>居住者:{item.name ? item.name : '无'}</span>
                                </div>
                            </div>
                        )
                    })}
                </div>
                {show1 ? <div className="live-container">
                    <div style={{ textAlign: 'center', fontSize: '16px', lineHeight: '20px' }}>
                        <span>客户信息</span>
                    </div>
                    <CloseSquareOutlined className="close-button" onClick={handleClose} />
                    <hr />
                    <ul style={{ listStyleType: 'none', marginTop: '30px' }}>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>房间号:</div>
                            <input type='text' className="li-input" value={number} disabled />
                        </li>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>姓名:</div>
                            <input type='text' className="li-input" value={name} onChange={handleChangeName} />
                        </li>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>电话:</div>
                            <input type='text' className="li-input" value={phone} onChange={handleChangePhone} />
                        </li>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>住宿时间:</div>
                            <input type='text' className="li-input" value={time} onChange={handleChangeTime} />
                        </li>
                        <button className="confirm-button" onClick={() => handleLiveIn(usedId, number, name, phone, time)}>
                            确认
                        </button>
                    </ul>
                </div> : ''}
                {show2 ? <div className="live-container">
                    <div style={{ textAlign: 'center', fontSize: '16px', lineHeight: '20px' }}>
                        <span>客户信息</span>
                    </div>
                    <CloseSquareOutlined className="close-button" onClick={handleClose2} />
                    <hr />
                    <ul style={{ listStyleType: 'none', marginTop: '30px' }}>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>房间号:</div>
                            <input type='text' className="li-input" value={number} disabled />
                        </li>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>姓名:</div>
                            <input type='text' className="li-input" value={name} disabled />
                        </li>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>电话:</div>
                            <input type='text' className="li-input" value={phone} disabled />
                        </li>
                        <li className="li-item">
                            <div style={{ fontSize: '16px', width: '70px', textAlign: 'center' }}>住宿时间:</div>
                            <input type='text' className="li-input" value={time} disabled />
                        </li>
                    </ul>
                </div> : ''}
            </Content>
        </Fragment>
    )
}

// class Home extends Component{
//     constructor(props){
//         super(props);
//         this.handleChangeRoom = this.handleChangeRoom.bind(this);
//         this.handleChangeName = this.handleChangeName.bind(this);
//         this.handleChangePhone = this.handleChangePhone.bind(this);
//         this.handleChangeTime = this.handleChangeTime.bind(this);
//         this.handleOpen = this.handleOpen.bind(this);
//         this.handleClose = this.handleClose.bind(this);
//         this.handleLiveIn = this.handleLiveIn.bind(this);
//         this.handleShowInfo = this.handleShowInfo.bind(this);
//         this.handleClose2 = this.handleClose2.bind(this);
//         this.state = {
//             show1:false,
//             show2:false,
//             useId:1,
//             number:'',
//             name:'',
//             phone:'',
//             time:''
//         }
//     }
//     render(){
//         const { show1,show2,useId,number,name,phone,time } = this.state;
//         const { roomList } = this.props;
//         return(
//             <Fragment>
//                 <Head/>
//                 <Content style={{ padding: '10px 50px' }}>
//                     <div className="home-container">
//                         {roomList.map((item)=>{
//                             return(
//                                 <div key={item.id} className="room-item">
//                                     {item.used?<div><LockOutlined onClick={()=>this.handleShowInfo(item.id)} className="room-icon"/></div>
//                                     :<UnlockOutlined className="room-icon" onClick={()=>this.handleOpen(item.id)}/>}
//                                     <div className="room-name">{item.number}房间</div>
//                                     <div className="room-desc">
//                                         <span>状态:{item.used?'使用中  ':'空闲  '}</span>
//                                         <span>居住者:{item.name?item.name:'无'}</span>
//                                     </div>
//                                 </div> 
//                             )
//                         })}
//                     </div>
//                     {show1?<div className="live-container">
//                         <div style={{textAlign:'center',fontSize:'16px',lineHeight:'20px'}}>
//                             <span>客户信息</span>
//                         </div>
//                         <CloseSquareOutlined className="close-button" onClick={this.handleClose}/>
//                         <hr />
//                         <ul style={{listStyleType:'none',marginTop:'30px'}}>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>房间号:</div>
//                                 <input type='text' className="li-input" value={this.state.number} disabled/>
//                             </li>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>姓名:</div>
//                                 <input type='text' className="li-input" value={this.state.name} onChange={this.handleChangeName}/>
//                             </li>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>电话:</div>
//                                 <input type='text' className="li-input" value={this.state.phone} onChange={this.handleChangePhone}/>
//                             </li>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>住宿时间:</div>
//                                 <input type='text' className="li-input" value={this.state.time} onChange={this.handleChangeTime}/>
//                             </li>
//                             <button className="confirm-button" onClick={()=>this.handleLiveIn(useId,number,name,phone,time)}>确认</button>
//                         </ul>
//                     </div>:''}
//                     {show2?<div className="live-container">
//                         <div style={{textAlign:'center',fontSize:'16px',lineHeight:'20px'}}>
//                             <span>客户信息</span>
//                         </div>
//                         <CloseSquareOutlined className="close-button" onClick={this.handleClose2}/>
//                         <hr />
//                         <ul style={{listStyleType:'none',marginTop:'30px'}}>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>房间号:</div>
//                                 <input type='text' className="li-input" value={this.state.number} disabled/>
//                             </li>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>姓名:</div>
//                                 <input type='text' className="li-input" value={this.state.name} disabled/>
//                             </li>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>电话:</div>
//                                 <input type='text' className="li-input" value={this.state.phone} disabled/>
//                             </li>
//                             <li className="li-item">
//                                 <div style={{fontSize:'16px',width:'70px',textAlign:'center'}}>住宿时间:</div>
//                                 <input type='text' className="li-input" value={this.state.time} disabled/>
//                             </li>
//                         </ul>
//                     </div>:''}
//                 </Content>
//             </Fragment>
//         )
//     }
//     handleChangeRoom(e){
//         var room = e.target.value;
//         this.setState({
//             room:room
//         })
//     }
//     handleChangeName(e){
//         var name = e.target.value;
//         this.setState({
//             name:name
//         })
//     }
//     handleChangePhone(e){
//         var phone = e.target.value;
//         this.setState({
//             phone:phone
//         })
//     }
//     handleChangeTime(e){
//         var time = e.target.value;
//         this.setState({
//             time:time
//         })
//     }
//     handleOpen(id){
//         this.setState({
//             useId:id,
//             show1:true,
//             number:this.props.roomList[id-1].number
//         })
//     }
//     handleLiveIn(id,number,name,phone,time){
//         this.props.liveIn(id,number,name,phone,time);
//         this.handleClose();
//         this.setState({
//             name:'',
//             phone:'',
//             time:''
//         })
//     }
//     handleClose(){
//         this.setState({
//             show1:false,
//             name:'',
//             phone:'',
//             time:''
//         })
//     }
//     handleShowInfo(id){
//         this.setState({
//             useId:id,
//             show2:true,
//             number:this.props.roomList[id-1].number,
//             name:this.props.roomList[id-1].name,
//             phone:this.props.roomList[id-1].phone,
//             time:this.props.roomList[id-1].time
//         })
//     }
//     handleClose2(){
//         this.setState({
//             show2:false,
//             name:'',
//             phone:'',
//             time:''
//         })
//     }
// }
const mapStateToProps = (state) => ({
    roomList: state.app.roomList
})
const mapDispatchToProps = (dispatch) => ({
    liveIn(id, number, name, phone, time) {
        const action = actionCreator.liveIn(id, number, name, phone, time);
        dispatch(action);
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(Home);